<!doctype html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="referrer" content="no-referrer"/>
    <title>[[${course.title}]]-课程中心</title>

    <!-- Main Font -->
<!--    <script src="front/js/libs/webfontloader.min.js"></script>-->
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" type="text/css" href="front/Bootstrap/dist/css/bootstrap-reboot.css">
    <link rel="stylesheet" type="text/css" href="front/Bootstrap/dist/css/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="front/Bootstrap/dist/css/bootstrap-grid.css">

    <style>
        body{
            padding-right: 0px !important;
            background-color:rgb(238,238,238);
        }
        .modal-open{
            overflow: auto;
        }
        .navbar{
            margin-bottom: 0px;
            background-color: #FFFFFF;
            box-shadow: 0 0 1em #eee;
            height:55px;
            line-height: 55px;
        }
        /*以下设置导航栏样式*/
        .jumbotron{
            background-color: #0362d8;
            color:white;
        }
        .btn-primary{
            background-color: #03A9F4;
            border-radius: 5px;
        }
        .table-top-box{
            border-radius: 5px;
            padding:40px 45px;
            background-color:white;
        }
        .service-box li{
            float:left;
            width: 33%;
            text-align:center;
            list-style: none;
        }

        .text-span{
            font-size:50px;
            color:#666;
            line-height: 50px;
            font-width: lighter;
        }
        .cont-stit{
            margin-top:16px;
            font-size: 12px;
            color:#82868d;
        }
        .card-header{
            text-align: center;
            border-bottom: 1px solid #e6ecf5;
            margin-bottom: 10px;
        }
        .card-wrap{
            padding-top:60px;
            height:300px;
        }
        .card-body{
            padding:10px 10px;
        }
        .form-control{
            margin-bottom: 10px;
        }

        /*自定义登录框样式*/
        .login-wrap{
            padding: 20px 30px;
        }
        .modal-header{
            color:#666;
            font-size: 24px;
            font-weight: 600;
            text-align: center;
        }
        .login-btn{
            display: block;
            width: 100%;
        }
        .login-tip{
            text-align: center;
            font-size: 14px;
            color:#1E9FFF;
            letter-spacing: 0;
            line-height: 14px;
        }
        .login-footer{
            color: #808080;
            text-align: center;
        }

        .collect-btn{
            margin-left: 20px;
        }

        ul.comment-ul{
            list-style-type:circle;
        }
        .panel-info{
            border-color:#fff;
        }
        li.comment-li{
            border-bottom: 1px solid #e6ecf5;
            margin-bottom: 5px;
        }
        comment-div-wrap{
            padding:5px;
        }
        a.comment-name{
            font-weight: 600;
        }
        time.comment-time{
            float:right;
        }
        p.comment-content{
            padding:5px
        }
    </style>
</head>
<body>
<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal"  style="z-index: 9999;" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="login-wrap">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <span class="modal-title" id="myModalLabel">账号登录</span>
                </div>
                <div class="modal-body">
                    <form role="form">
                        <div class="form-group">
                            <input type="text" class="form-control" id="name" placeholder="请输入账号登录" value="admin">
                        </div>
                        <div class="form-group">
                            <input type="password" class="form-control" id="password" placeholder="请输入任意字符的6-18位密码,注意密码不支持更改" value="123456">
                        </div>
                        <div class="form-group">
                            <button type="button" class="btn btn-primary login-btn" onclick="login()">登录</button>
                        </div>
                        <div class="form-group login-tip">
                            未注册账户登录后默认为你创建账号
                        </div>
                    </form>
                </div>
                <div class="modal-footer login-footer">
                    登录即代表你同意<a>用户协议</a>和<a>隐私政策</a>
                </div>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>
<div th:replace="common/bar::#header"></div>
<div class="jumbotron" style="padding-left: 20%;margin-top: 55px">
    <div style="width: 60%">
        <span style="font-size: 32px;">[[${course.title}]]</span>
        <p style="font-size: 14px;padding-top:5px">[[${course.introduce}]]</p>
        <button type="button" class="btn btn-primary">
            <a th:href="@{${course.courseUrl}}" style="color:#fff" target="_blank">
                立刻去学习！
            </a>
        </button>
        <button type="button" class="btn btn-primary collect-btn" th:if="${isCollection}" th:onclick="addCollection([[${course.id}]],[[${userInfo}]])">
            <a style="color:#fff">
                收藏此课程
            </a>
        </button>
        <button type="button" class="btn btn-danger collect-btn" th:if="${!isCollection}"  th:onclick="cancleCollection([[${course.id}]],[[${userInfo}]])">
            <a style="color:#fff">
                取消收藏此课程
            </a>
        </button>
    </div>
</div>
<div class="container">
    <div class="row">
        <div class="col-sm-12 table-top-box">
            <ul class="service-box">
                <li>
                    <p class="cont-tit">
                        <span th:text="${course.courseSections}" class="text-span"></span>
                    </p>
                    <p class="cont-stit">
                        小节数
                    </p>
                </li>
                <li>
                    <p class="cont-tit">
                        <span th:text="${course.readCount}" class="text-span"></span>
                    </p>
                    <p class="cont-stit">
                        浏览数
                    </p>
                </li>
                <li>
                    <p class="cont-tit">
                        <span th:text="${course.courseTime}" class="text-span"></span>
                    </p>
                    <p class="cont-stit">
                        课程时长
                    </p>
                </li>
            </ul>
        </div>
    </div>
    <!-- Comment Form  -->
    <div class="row" style="margin-bottom: 50px;margin-top: 50px">
        <div class="col-sm-12 table-top-box">
            <div class="ui-block panel panel-info">
                <div class="card-header panel-heading">
                    <h3 style="font-size: 30px;font-weight: 500;">留言板</h3>
                </div>
                <div class="row panel-body">
                    <div class="col-sm-6" style="height: 300px;overflow: auto">
                        <div class="card-body">
                            <ul class="comment-ul">
                                <li class="comment-li" th:each="comment:${comments}">
                                    <div class="comment-div-wrap">
                                        <a class="comment-name" th:text="${comment.username}"></a>
                                        <time class="comment-time" th:text="${#dates.format(comment.time,'yyyy年MM月dd日 HH:mm:ss')}"></time>
                                    </div>
                                    <p class="comment-content" th:text="${comment.content}"></p>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="col-sm-6 card-wrap">
                        <div class="card-body">
                            <textarea id="content" style="min-height: 132px" class="form-control" placeholder="在此处输入留言内容"></textarea>
                            <button  class="btn btn-md-2 btn-primary" th:onclick="addComment([[${course.id}]],[[${userInfo}]])">提交留言</button>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
    <!-- ... end Comment Form  -->
</div>
<div class="jumbotron text-center" id="footer" style="margin-bottom:0;background-color:rgb(245,246,247);">
    <span class="span" style="color:#000;">Copyright &copy wuzhiming</span>
</div>
</body>
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="common/js/sweetalert.min.js"></script>
<script src="common/js/login.js"></script>
<script>
    /**
     * 收藏课程
     */
    function addCollection(id,userInfo) {
        if (userInfo == null){
            swal("警告","请先登录再收藏课程", "warning");
            return;
        }
        $.ajax({
            type: "POST",
            url: "addCollection",
            data: {courseId:id,userId:userInfo.id},
            dataType: "json",
            success: function(data){
                if (data['code']== 200){
                    swal("成功", "收藏课程成功", "success");
                    setTimeout((function(){
                        window.location.reload();
                    }),2000)
                }else{
                    swal("出错啦", "服务器发生了一个错误", "error");
                }
            }
        });
    }

    /**
     * 取消收藏课程
     */
    function cancleCollection(id,userInfo) {
        $.ajax({
            type: "POST",
            url: "cancleCollection",
            data: {courseId:id,userId:userInfo.id},
            dataType: "json",
            success: function(data){
                if (data['code']== 200){
                    swal("成功", "取消收藏课程成功", "success");
                    setTimeout((function(){
                        window.location.reload();
                    }),2000)
                }else{
                    swal("出错啦", "服务器发生了一个错误", "error");
                }
            }
        });
    }


    /**
     * 提交留言
     */
    function addComment(id,userInfo) {
        if (userInfo == null){
            swal("警告","请先登录再留言课程", "warning");
            return;
        }
        let content = document.getElementById("content").value.trim();
        if (content == ""){
            swal("警告","评论内容不能为空哦", "warning");
            return;
        }else if(content.length<=5){
            swal("警告","评论内容长度不能小于5个字哦", "warning");
            return;
        }else{
            $.ajax({
                type: "POST",
                url: "addComment",
                data: {courseId:id,content:content},
                dataType: "json",
                success: function(data){
                    if (data['code']== 200){
                        swal("成功", "留言成功", "success");
                        setTimeout((function(){
                            window.location.reload();
                        }),2000)
                    }else{
                        swal("出错啦", "服务器发生了一个错误", "error");
                    }
                }
            });
        }
    }
</script>
</html>